import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { Cell, Image, Toast, NavBar, NoticeBar } from 'react-vant';
import { getUser } from '../../../request'
import './user.css'
import { useSelector } from 'react-redux'; // 导入 useSelector

function UseList() {
    const navigate = useNavigate()
    const [users, setUsers] = useState([])
    // 从 Redux 中获取当前用户
    const { currentUser } = useSelector(state => state.conter);


    // 获取所有用户
    const getData = async () => {
        let { data: { data } } = await getUser()
        console.log(data);
        setUsers(data)
    }

    useEffect(() => {
        getData()
    }, [])

    const skip = (item) => {
        console.log(item);
        navigate('/chats', { state: item })
    }

    return (
        <div>
            <NavBar
                title='联系人'
                leftText=''
                onClickLeft={() => Toast('返回')}
            />
            <NoticeBar scrollable mode="closeable">
                爆ぜろリアル答！弾けろシナプス！ パニッシュメント内 ディス、ワールド！
            </NoticeBar>


            {users
                .filter(user => user.username !== currentUser.username) // 过滤掉当前用户
                .map(item =>
                    <Cell
                        key={item._id}
                        title={item.username}
                        icon={<Image width={44} height={44} src='https://img.yzcdn.cn/vant/apple-3.jpg' round />}
                        isLink
                        onClick={() => { skip(item) }}
                    />
                )}
        </div>
    );
}

export default UseList;